<template>
	<view class="page">
		<image class="poster" :src="fileUrl" mode="widthFix"></image>
		<view class="download-btn">
			<image class="icon" :src="downloadIcon"></image>
			<text style="margin-left: 20rpx" @click="download">点击下载</text>
		</view>
	</view>
</template>

<script>
import { getShowNginxPicUrl } from "@/utils/settings"
import downloadIcon from "./assets/download.png"
import { getShowImage, showModal, showModalPromise, showToast } from "@/utils"

export default {
	methods: { 
		getShowNginxPicUrl,
		getShowImage,
		async download() {
			await showModalPromise({
				content: `由于小程序限制，请手动复制链接到浏览器进行下载，下载链接：${this.fileUrl}`,
				showCancel: false,
				confirmText: "复制链接"
			})
			uni.setClipboardData({
				data: this.fileUrl,
				success() {
					showToast.default("链接已复制到剪贴板")
				}
			})
		}
	},
	data() {
		return {
			downloadIcon,
			fileUrl: "",
		}
	},
	onLoad(query) {
		this.fileUrl = getShowImage(decodeURIComponent(query.fileUrl))
	}
}
</script>

<style lang="scss" scoped>
.page {
	padding-bottom: 20vh;
	> .poster {
		width: 100%;
	}
	> .download-btn {
		position: fixed;
		left: 50rpx;
		right: 50rpx;
		bottom: calc(50rpx + env(safe-area-inset-bottom));
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 32rpx;
		background: #FF6219;
		border-radius: 41rpx;
		> .icon {
			width: 40rpx;
			height: 40rpx;
		}
	}
}
</style>
